<template>
  <div class="child">
        
    我是子组件{{title2}}
    <slot ></slot>
    <el-button type="primary" icon="el-icon-search" @click="parentFunction">{{ title }}</el-button>
  </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    props: {
        title: {
            type: String,
            default: () => {}
        },
         title2: {
            type: String,
            default: () => {}
        },
    },
    data() {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    }, methods: {
        parentFunction() {
            // this.$parent.fatherMethod()
            this.$emit('fatherEvent')
        },
        child() {
            alert('我是子方法,被调用了')
        }

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .child {
color:red
  }
</style>
